<template>
  <div>
    <ul class="mui-table-view">
      <li id="device.html" class="mui-table-view-cell" @click="getImage">
        <a class="mui-navigate-right"> 调用拍照 </a>
      </li>
      <li id="device.html" class="mui-table-view-cell" @click="galleryImg">
        <a class="mui-navigate-right"> 调用相册 </a>
      </li>
    </ul>

    <br />

    <el-image
      style="width: 200px; height: 200px"
      src="https://192.168.133.246:5001/api/UserCheckInfo/2020-11/7da7cae3129f49e1b0085b317957ea85.jpg"
      @load="imageLoading"
    />
    <img style="width: 200px; height: 200px" v-lazy="imgUrl" :key="12345" />
    <!-- src="https://192.168.133.246:5001/api/UserCheckInfo/2020-11/179021b260404a188209223bd196eae3.jpg" -->
    <!-- <van-image
      width="200px"
      height="200px"
      lazy-load
      src="https://192.168.133.246:5001/api/UserCheckInfo/2020-11/179021b260404a188209223bd196eae4.jpg"
    /> -->
  </div>
</template>

<script>
export default {
  name: 'Camera',
  data() {
    return {
      imgUrl: "https://192.168.133.246:5001/api/UserCheckInfo/2020-11/7da7cae3129f49e1b0085b317957ea85.jpg"
    }
  },
  created() {
    // 扩展API是否准备好，如果没有则监听“plusready"事件
    if (window.plus) {
      this.plusReady();
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
  },
  methods: {
    // 扩展API准备完成后要执行的操作
    plusReady() {
      var ws = plus.webview.currentWebview(); // pw回车可输出plus.webview
      console.log("hello plus");
    },
    getImage() {
      let cmr = plus.camera.getCamera() // 获取摄像头对象
      let res = cmr.supportedImageResolutions[0] // 字符串数组，摄像头支持的拍照分辨率
      let fmt = cmr.supportedImageFormats[0] // 字符串数组，摄像头支持的拍照文件格式
      console.log('Resolution :' + res + ', Format: ' + fmt)
      cmr.captureImage((path) => {
        alert('调用成功: ' + path)
      },
        (error) => { // 拍照操作失败的回调函数
          alert('调用失败: ' + error.message)
        },
        { resolution: res, format: fmt } // 摄像头拍照参数
      )
    },
    galleryImg() {
      plus.gallery.pick((filePath) => {
        alert(filePath);
        plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
          entry.file((file) => {
            alert(typeof file);
            alert()
          })
        },
          function (e) {
            alert("读取拍照文件错误：" + e.message);
          });
      },
        function (a) { }, {
        filter: "image"
      })
    },
    uploadHead(imgPath) {
      alert('选中的图片为' + imgPath);
    },
    imageLoading() {
      console.log("图片加载完成");
    }
  }
}
</script>
